<template>
  <view>
    <view class="fix-btn-box" v-if="selfSave!=true">
      <img @click="phoneStart" class="fix-btn" src="./img/bottom-btn.png" alt="">
    </view>
    <!-- 填写手机弹窗 -->
    <my-popup ref="phonePopup" type="center" :mask-click="false" mask-background-color="rgba(0,0,0,0.8)">
      <view class="pop-hit-box">
        <view class="pop-tips">
          <image mode="widthFix" src="./img/phoneTitle.png" alt=""></image>
        </view>
        <view class="pop-info-box">
          <view class="pop-info-title">填写号码后 解锁以下福利</view>
          <view class="pop-info-tips">
            <view>1.报告永久保存，随时查看</view>
            <view>2.报告更新后，第一时间通知</view>
            <view>3.老师一对一服务。</view>
          </view>
          <view>
            <uni-easyinput :styles="styles" :placeholderStyle="placeholderStyle" type="text" v-model="formData.phone" placeholder="输入手机号(限中国大陆用户)" />
          </view>
  <!-- <view class="input-and">
            或
          </view>
          <view>
            <uni-easyinput :styles="styles" :placeholderStyle="placeholderStyle" type="text" v-model="formData.email" placeholder="输入邮箱地址" />
          </view> -->
          <view class="pop-info-notice">
            <view>我同意自动注册并关联购买记录</view>
            <view class="pop-close" @click="close">放弃保存</view>
          </view>
        </view>
        <view class="pop-tips" @click="confrmSubmit">
          <image mode="widthFix" src="./img/phoneConfirm.png" alt=""></image>
        </view>
      </view>
    </my-popup>
  </view>
</template>

<script>
import { sendPhoneEmailApi } from '@/http/api'
export default {
  name: 'phone-save-modal',
  props: {
  	isSave:{
  		type: Boolean,
  		default: true
  	},
    oid:{
    	type: String,
    	default: ''
    }
  },
  data() {
    return {
      formData: {
        phone: '',
        email: ''
      },
      styles: {
        color: '#646464',
        borderColor: '#bb2800',
      },
      placeholderStyle: "color:#646464;font-size:28rpx"
    }
  },
  computed: {
    selfSave: function () {
      return this.isSave
    } 
  },
  methods: {
      phoneStart() {
        this.formData.phone = ''
        this.formData.email = ''
        this.$refs.phonePopup.open()
      },
      close() {
        this.$refs.phonePopup.close()
      },
      confrmSubmit() {
        if (this.formData.phone == '') {
          // uni.showToast({
          // 	title: '电话和邮箱不能同时为空',
          // 	icon: 'none'
          // });
          // return
          uni.showToast({
          	title: '手机号不能为空',
          	icon: 'none'
          });
          return
        }else{
          if (this.formData.phone != '') {
            var reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57]|19[19])[0-9]{8}$/;
            if (this.formData.phone.length != 11) {
              uni.showToast({
                title: '请输入正确的待测算手机号',
                icon: 'none'
              });
              return false
            }            
          }
          // if (this.formData.email != '') {
          //   var emailReg = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
          //   if (!emailReg.test(this.formData.email)) {
          //     uni.showToast({
          //       title: '请输入正确的邮箱地址',
          //       icon: 'none'
          //     });
          //     return false
          //   }            
          // }
          sendPhoneEmailApi({
            email: '',
            phone: this.formData.phone,
            oid: this.oid
          }).then(res => {
            if (res.code === 200) {
              if (this.formData.phone != '') {
                this.selfSave = true
                this.$emit('update:isSave', true)
              }
            }
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
          })
          this.close();
        }
      }
  }}
</script>

<style lang="scss" scoped>
.fix-btn-box {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 750px;
  text-align: center;
  z-index: 999;
  .fix-btn {
    display: block;
    width: 100%;
  }
}
.pop-hit-box {
  width: 80%;
  margin: auto;
  box-sizing: border-box;
  position: relative;
  .pop-tips {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-bottom: 40rpx;
  }
  .pop-info-box {
    width: 100%;
    max-width: 600rpx;
    margin: 0 auto 32rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 30rpx;
    border: solid 2rpx #bb2800;
    padding: 65rpx 60rpx 30rpx;
    .pop-info-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #bb2800;
      padding: 0 47rpx 25rpx;
      white-space: nowrap;
    }
    .pop-info-tips {
      font-size: 30rpx;
      line-height: 45rpx;
      color: #333333;
      padding: 0 47rpx 45rpx;
      white-space: nowrap;
    }
    .input-and {
      text-align: center;
    }
    .pop-info-notice {
      padding-top: 51rpx;
      font-size: 24rpx;
      line-height: 36rpx;
      color: #646464;
      text-align: center;
    }
    .pop-close {
      color: red;
      text-decoration: underline;
    }
  }
}
</style>